import React from 'react';
import { connect } from 'dva'

import Title from 'components/Title'
import Chart from 'components/Chart'

@connect(({ business }) => ({ ...business }))
class StatisticsPie extends React.Component {
  echartsConf = [
    {
      key: 'cjsf',
      label: '用水情况分析',
      chart: {
        type: 'Pie', dataSource: 'WaterUseResource',
        other: { radius: ['0%', '60%'], formatType: 'value', unit: 'm³' },
        columns: {
          name: '',
          field: [{ name: 'label', value: 'value' }]
        }
      },
      extra: {
        list: [{ label: '总计', field: 'count' }],
        source: { type: 'count', field: 'value', unit: 'm³' },    // count,则从数组中累加; field累加字段
      },
      server: { type: 'business/queryWaterUse', payload: {}},
    },
    {
      key: 'depositItems',
      label: '缴费来源分析',
      chart: {
        type: 'Pie', dataSource: 'IncomingResource',
        other: { radius: ['0%', '60%'], formatType: 'value', unit: '元' },
        columns: {
          name: '',
          field: [{ name: 'key', value: 'value' }]
        }
      },
      extra: {
        list: [{ label: '总计', field: 'count' }],
        source: { type: 'count', field: 'value', unit: '元' },    // count,则从数组中累加; field累加字段
      },
      server: { type: 'business/queryIncoming', payload: { ids: "" } },
    },
    {
      key: 'useTypeItems',
      label: '催缴水费分析',
      chart: {
        type: 'Pie', dataSource: 'IncomingResource',
        other: { radius: ['0%', '60%'], formatType: 'value', unit: '元' },
        columns: {
          name: '',
          field: [{ name: 'key', value: 'value' }]
        }
      },
      extra: {
        list: [{ label: '总计', field: 'count' }],
        source: { type: 'count', field: 'value', unit: '元' },    // count,则从数组中累加; field累加字段
      },
    },
    
  ]

  constructor(props) {
    super(props);

    let time;
    if ('defaultValue' in props) {
      time = props.defaultValue;
    }
    this.state = {
      time,
    };
  }

  componentDidMount() {
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue) {
      if (nextProps.defaultValue) {
        this.setState({
          time: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  init = async () => {
    await this.setDateECharts()
  }

  // 图表
  setDateECharts = () => {
    this.echartsConf.map(ele => {
      const { server } = ele;
      // 如果有 server则调用
      if (server) this.queryECharts(server);
    })
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time } = this.state;
    let { payload } = server;
    Object.assign(payload, {
      startDate: `${time}-01-01`,
      endDate: `${time}-12-31`,
    })
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }

  // 图表渲染
  RenderChart() {
    const { props, echartsConf } = this;

    let charts = null;
    charts = echartsConf.map(ele => {
      const { key, label, chart, extra } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;

      let dataResource = props[dataSource];
      // 除 10000
      if(dataSource === 'IncomingResource'){
        const Resource = dataResource[key]
        dataResource = Resource.map(ele => {
          let rObj = {};
          rObj['value'] = ele.value/10000;
          rObj['key'] = ele.key;
          return rObj;
        })
      }
      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={dataResource}
            extra={extra}
            other={other}
          />
        </Title>
      )
    })
    return <>{charts}</>
  }

  render() {
    return (<>
      {this.RenderChart()}
    </>)
  }
}

export default StatisticsPie;
